import React, { Component } from 'react'
import './Home.css'
// store
import { connect } from 'react-redux'
// antd组件
import {
  NavBar, // 顶部标题
  Grid, // 九宫格
  Button, // 按钮
  Toast, // 提示框
} from 'antd-mobile'
// 导入api
import { updataUserInfoAxios } from '../../api/api'
// 导入user中的action
import { updataUserInfoAction } from '../../redux/user/actions'
// 导入头像
import imgs from './avatar'
const avatars = JSON.parse(imgs)

class Home extends Component {
  state = {
    job: '', // 求职岗位
    introduce: '', // 个人介绍
    avatarIndex: 0, // 选中头像下标
  }
  /* 清除状态数据 */
  clearState = () => {
    const obj = this.state
    for (let key in obj) {
      if (key === 'avatarIndex') this.setState({ [key]: 0 })
      else this.setState({ [key]: '' })
    }
  }
  /* 收集表单数据 */
  saveFormData = (key, val) => {
    this.setState({ [key]: val })
  }
  /* 提交用户信息 */
  submitFn = () => {
    const obj = {
      header: avatars[this.state.avatarIndex],
      info: this.state.introduce,
      post: this.state.job
    }
    // 提交更新后的数据给后端
    updataUserInfoAxios(obj).then(res => {
      if (res.code === 0 && res.data) {
        Toast.show({
          icon: 'success',
          content: '提交成功'
        })
        // 存储用户更新后的数据
        this.props.updataUserInfoAction(res.data)
        // 清除本组件状态数据
        this.clearState()
        // 跳转到指定路由界面
        this.props.history.push('/bosslist')
      } else {
        Toast.show({
          icon: 'fail',
          content: '提交失败'
        })
      }
    })
  }
  /* 改变头像选中的序号 */
  changeAvatarIndex = (index) => {
    this.setState({ avatarIndex: index })
  }
  render() {
    const { job, introduce, avatarIndex } = this.state
    return (
      <div className='home'>
        <NavBar backArrow={false}>大神信息完善界面</NavBar>
        <div className='select-avatar'>选择头像</div>
        <div className="avatars-box">
          <Grid columns={5} gap={6}>
            {
              avatars.map((item, index) => {
                return (
                  <Grid.Item key={index}
                    className={avatarIndex === index ? 'avatar-active' : ''}
                    onClick={() => this.changeAvatarIndex(index)}
                  >
                    <img src={item} alt='' />
                    <p>{`头像` + (index + 1)}</p>
                  </Grid.Item>
                )
              })
            }
          </Grid>
        </div>
        {/* 表单数据 */}
        <form>
          <div className='user-job'>
            <span>求职岗位：</span>
            <input
              type="text"
              placeholder='请输入求职介绍'
              name='job'
              value={job}
              onChange={(e) => this.saveFormData('job', e.target.value)}
            />
          </div>
          <div className='user-introduce'>
            <span>个人介绍：</span>
            <input
              type="text"
              placeholder='请输入个人介绍'
              name='introduce'
              value={introduce}
              onChange={(e) => this.saveFormData('introduce', e.target.value)}
            />
          </div>
        </form>
        <Button block size='large' className='submit' onClick={this.submitFn}>提交</Button>
      </div>
    )
  }
}
// 连接store
export default connect(
  state => ({ state: state.user }),
  { updataUserInfoAction }
)(Home)
